<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #dialog-link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;
        }
        #dialog-link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;
        }
        
    </style>
    <link rel="stylesheet" href="jquery-ui-1.12.1.custom\jquery-ui.css">
        
    <!-- //2.引入jQuery 的js文件 -->
   <script src="jquery-2.0.0.min.js"></script>

    <!-- //3.引入jQuery UI的js文件 -->
   <script src="jquery-ui-1.12.1.custom\jquery-ui.js"></script>
    <!-- //4.查找和复制UI 中的某个功能的所有的代码（html，css，js） -->

    <!-- //5.测试和使用 -->

    <script>

        //页面加载的代码先写上
        $(function(){
            $( "#dialog" ).dialog({
                autoOpen: false,
                width: 400,
                buttons: [
                    {
                        text: "Ok",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            // Link to open the dialog
            $( "#dialog-link" ).click(function( event ) {
                $( "#dialog" ).dialog( "open" );
                event.preventDefault();
            });

            $( "#dialog-link, #icons li" ).hover(
                function() {
                    $( this ).addClass( "ui-state-hover" );
                },
                function() {
                    $( this ).removeClass( "ui-state-hover" );
                }
            );
        })
    </script>
</head>
<body>
    <h2 class="demoHeaders">Dialog</h2>
    <p>
        <button id="dialog-link" class="ui-button ui-corner-all ui-widget">
            <span class="ui-icon ui-icon-newwin"></span>Open Dialog
        </button>
    </p>

    
       
    </div>

    <!-- ui-dialog -->
    <div id="dialog" title="Dialog Title">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>